<template>
	<view class="container">
		<view class="job-box">
			<view class="job-list" v-if="jobList.length">
				<view class="job-item" v-for="(item, index) in jobList" :key="index" @click="goTo(item)">
					<view class="top">
						<view class="title">
							<text>{{ item.name }}</text>
							<text class="distance">距你{{ item.distance }}</text>
						</view>
						<view class="tag" v-if="item.taglist">
							<view class="tag-item" v-for="(tag_item, tag_index) in item.taglist" :key="tag_index">{{ tag_item }}</view>
						</view>
					</view>
					<view class="bottom">
						<text class="price">{{ item.salary }}</text>
						<view class="look-btn">去看看</view>
					</view>
				</view>
			</view>
			<view v-else>
				<van-empty description="还没有收藏任何职位" />
			</view>
		</view>
	</view>
</template>

<script>
import { getCollectJobList } from '@/api/user.js'
import { mapState, mapMutations } from 'vuex'

export default {
	data() {
		return {
			jobList: [],
			page: 1,
			pageSize: 10
		}
	},
	computed: {
		...mapState(['location'])
	},
	onLoad() {
		this.loadList()
	},
	onReachBottom(e) {
		this.loadList()
	},
	methods: {
		loadList() {
			getCollectJobList({
				page: this.page,
				pagesize: this.pageSize,
				lng: this.location.longitude,
				lat: this.location.latitude
			}).then(res => {
				if (res.length) {
					this.page++
					this.jobList = this.jobList.concat(res)
				}
			})
		},
		goTo(item) {
			uni.navigateTo({
				url: `/pages/index/job/detail?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.job-box {
		.job-list {
			padding: 20rpx;
			background-color: #f5f5f5;
			.job-item {
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				&:last-of-type {
					margin-bottom: 0;
				}
				.top {
					position: relative;
					padding: 20rpx 20rpx 0 20rpx;
					&::after {
						content: '';
						position: absolute;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: #e5e5e5;
					}
					.title {
						font-size: 30rpx;
						margin-bottom: 20rpx;
						.distance {
							font-size: 20rpx;
							color: #999999;
							float: right;
							margin-top: 5rpx;
						}
					}
					.tag {
						display: flex;
						overflow: hidden;
						margin-bottom: 20rpx;
						.tag-item {
							font-size: 26rpx;
							margin-left: 10rpx;
							padding: 4rpx 8rpx;
							color: #749ced;
							background-color: #edeffc;
							&:first-of-type {
								margin-left: 0;
							}
						}
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 20rpx;
					.price {
						color: #07C160;
					}
					.look-btn {
						background-color: #07C160 !important;
						color: #fff;
						padding: 10rpx 20rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
}
</style>
